<template>
  <el-card>
    <el-row style="padding-bottom: 10px; border-bottom: 1px solid #ccc">
      <span>选择公众号：</span>
      <el-select v-model="mpAppid" @change="getMpList" placeholder="请选择">
        <el-option
          v-for="item in configList"
          :key="item.appid"
          :label="item.appName"
          :value="item.appid"
          
        >
        </el-option>
      </el-select>
    </el-row>
    <div id="app-menu">
      <!-- 预览窗 -->
      <div class="weixin-preview">
        <div class="weixin-bd">
          <div class="weixin-header">公众号菜单</div>
          <ul class="weixin-menu" id="weixin-menu">
            <li
              v-for="(btn, i) in menu.buttons"
              :key="i"
              class="menu-item"
              :class="{
                current: selectedMenuIndex === i && selectedMenuLevel == 1,
              }"
              @click="selectMenu(i)"
            >
              <div class="menu-item-title">
                <span>{{ btn.name }}</span>
              </div>
              <ul class="weixin-sub-menu">
                <li
                  v-for="(sub, i2) in btn.subButtons"
                  :key="i2"
                  class="menu-sub-item"
                  :class="{
                    current:
                      selectedMenuIndex === i &&
                      selectedSubMenuIndex === i2 &&
                      selectedMenuLevel == 2,
                    'on-drag-over': onDragOverMenu == i + '_' + i2,
                  }"
                  @click.stop="selectSubMenu(i, i2)"
                  draggable="true"
                  @dragstart="selectSubMenu(i, i2)"
                  @dragover.prevent="onDragOverMenu = i + '_' + i2"
                  @drop="onDrop(i, i2)"
                >
                  <div class="menu-item-title">
                    <span>{{ sub.name }}</span>
                  </div>
                </li>
                <li
                  v-if="btn.subButtons.length < 5"
                  class="menu-sub-item"
                  :class="{
                    'on-drag-over':
                      onDragOverMenu == i + '_' + btn.subButtons.length,
                  }"
                  @click.stop="addMenu(2, i)"
                  @dragover.prevent="
                    onDragOverMenu = i + '_' + btn.subButtons.length
                  "
                  @drop="onDrop(i, btn.subButtons.length)"
                >
                  <div class="menu-item-title">
                    <i class="el-icon-plus"></i>
                  </div>
                </li>
                <i class="menu-arrow arrow_out"></i>
                <i class="menu-arrow arrow_in"></i>
              </ul>
            </li>
            <li
              class="menu-item"
              v-if="menu.buttons.length < 3"
              @click="addMenu(1)"
            >
              <i class="el-icon-plus"></i>
            </li>
          </ul>
        </div>
      </div>
      <!-- 菜单编辑器 -->
      <div class="weixin-menu-detail" v-if="selectedMenuLevel > 0">
        <wx-menu-button-editor
          :button="selectedButton"
          :selectedMenuLevel="selectedMenuLevel"
          @delMenu="delMenu"
        ></wx-menu-button-editor>
      </div>
    </div>
    <div
      class="weixin-btn-group"
      v-hasPermi="['wx:menu:save']"
      @click="updateWxMenu"
    >
      <el-button type="success" icon="el-icon-upload">发布</el-button>
      <el-button type="warning" icon="el-icon-delete" @click="delMenu"
        >清空</el-button
      >
    </div>
  </el-card>
</template>

<script>
import { listConfig } from "@/api/core/config";
import { listMpMenu,updeteMenu } from "@/api/wxmpmenu/mpmenu";
export default {
  components: {
    wxMenuButtonEditor: () => import("./wx-menu-button-editor"),
  },
  data() {
    return {
      menu: { buttons: [] }, //当前菜单
      selectedMenuIndex: "", //当前选中菜单索引
      selectedSubMenuIndex: "", //当前选中子菜单索引
      selectedMenuLevel: 0, //选中菜单级别
      selectedButton: "", //选中的菜单按钮
      onDragOverMenu: "", //当前鼠标拖动到的位置
      queryParams: {
        pageNum: 1,
        pageSize: 500,
      },
      configList: [],
      mpAppid: "",
    };
  },
  mounted() {
    this.getMpList();
  },
  methods: {
    /** 查询身份标识列表 */
    async getMpList() {
      const loading = this.$loading({
          lock: true,
          text: 'Loading',
          // spinner: 'el-icon-loading',
          // background: 'rgba(0, 0, 0, 0.7)'
      });
      await listConfig(this.queryParams).then((response) => {
        this.configList = response.rows.filter((item) => {
          return item.type == "2";
        });
        if (this.configList.length > 0 && this.mpAppid =='') {
          this.mpAppid = this.configList[0].appid;
          this.getWxMenu();
          this.menu.appid = this.mpAppid;
        }else if(this.configList.length>0){
          this.getWxMenu();
          this.menu.appid = this.mpAppid;
        }
        loading.close()
      }).catch(()=>{
        loading.close()
      })

    },
    async getWxMenu() {
      this.menu= { buttons: [] }
      const res = await listMpMenu(this.mpAppid);
      console.log(res);
      if (res.code == 200) {
        this.menu = res.data.menu ?res.data.menu : { buttons: [] };
      } else {
        this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    //选中主菜单
    selectMenu(i) {
      this.selectedMenuLevel = 1;
      this.selectedSubMenuIndex = "";
      this.selectedMenuIndex = i;
      this.selectedButton = this.menu.buttons[i];
    },
    //选中子菜单
    selectSubMenu(i, i2) {
      this.selectedMenuLevel = 2;
      this.selectedMenuIndex = i;
      this.selectedSubMenuIndex = i2;
      this.selectedButton = this.menu.buttons[i].subButtons[i2];
    },
    //添加菜单
    addMenu(level, i) {
      if (level == 1 && this.menu.buttons.length < 3) {
        this.menu.buttons.push({
          type: "view",
          name: "菜单名称",
          subButtons: [],
          url: "",
        });
        this.selectMenu(this.menu.buttons.length - 1);
      }
      if (level == 2 && this.menu.buttons[i].subButtons.length < 5) {
        this.menu.buttons[i].subButtons.push({
          type: "view",
          name: "子菜单名称",
          url: "",
        });
        this.selectSubMenu(i, this.menu.buttons[i].subButtons.length - 1);
      }
    },
    //删除菜单
    delMenu() {
      if (
        this.selectedMenuLevel == 1 &&
        confirm("删除后菜单下设置的内容将被删除")
      ) {
        this.menu.buttons.splice(this.selectedMenuIndex, 1);
        this.unSelectMenu();
      } else if (this.selectedMenuLevel == 2) {
        this.menu.buttons[this.selectedMenuIndex].subButtons.splice(
          this.selectedSubMenuIndex,
          1
        );
        this.unSelectMenu();
      }
    },
    unSelectMenu() {
      //不选中任何菜单
      this.selectedMenuLevel = 0;
      this.selectedMenuIndex = "";
      this.selectedSubMenuIndex = "";
      this.selectedButton = "";
    },
    async updateWxMenu() {
      const res = await updeteMenu(this.mpAppid, this.menu);
      if (res.code == 200) {
        this.$message.success("操作成功");
      } else {
        this.$message.error(res.msg);
      }
    },
    onDrop(i, i2) {
      //拖拽移动位置
      this.onDragOverMenu = "";
      if (i == this.selectedMenuIndex && i2 == this.selectedSubMenuIndex)
        //拖拽到了原位置
        return;
      if (
        i != this.selectedMenuIndex &&
        this.menu.buttons[i].subButtons.length >= 5
      ) {
        this.$message.error("目标组已满");
        return;
      }
      this.menu.buttons[i].subButtons.splice(i2, 0, this.selectedButton);
      let delSubIndex = this.selectedSubMenuIndex;
      if (i == this.selectedMenuIndex && i2 < this.selectedSubMenuIndex)
        delSubIndex++;
      this.menu.buttons[this.selectedMenuIndex].subButtons.splice(
        delSubIndex,
        1
      );
      this.unSelectMenu();
    },
  },
};
</script>
<style src="@/assets/css/wx-menu.css"></style>